<template>

    <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate" style="position: relative;"> 
        <FormItem label="姓名拼音"  prop="py_name">
            <div>
            <Input v-model="formValidate.py_name" placeholder="姓名拼音" style="width:80%"></Input>
            </div>
        </FormItem> 
        <FormItem label="曾用名" prop="used_name.zh">
            <div>
            <Input  v-model="formValidate.used_name.zh" placeholder="曾用名" style="width:80%"></Input>
            </div>
        </FormItem>
        <FormItem label="特长" prop="specialty.zh">
            <div>
            <Input v-model="formValidate.specialty.zh" placeholder="特长" style="width:80%"></Input>
            </div>
        </FormItem>
        <FormItem label="身份证件有效期" prop="effective_date">
            <Col span="19">
            <DatePicker transfer  @on-change="getbirthday"  v-model="formValidate.effective_date" type="daterange" placement="left-start" placeholder="身份证件有效期" style="width:50%"></DatePicker>
            </Col>
        </FormItem> 
        <FormItem label="户口性质" prop="account_type_id">
            <Select v-model="formValidate.account_type_id" style="width:80%" transfer clearable>
                <Option :value="0" :key="0">农业户口</Option>  
                <Option :value="1" :key="1">非农业户口</Option>            
            </Select>
        </FormItem>

        <FormItem label="血型">
            <Select v-model="formValidate.blood_id" style="width:80%" transfer clearable>
                <Option v-for="(item,index) in listDictionary.blood" :value="item.dictionary_id" :key="index"> {{item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn}}</Option>            
            </Select>
        </FormItem>

        <FormItem label="户口所在地" style="width:100%;">
            <Select v-model="formValidate.account_location_id" style="width:30%" @on-change="native($event,'birth')" transfer clearable>
                <Option v-for="item in regionList" v-if="item.parent_id ==0" :value="item.id" :key="item.value">{{item.region_name.zh?item.region_name.zh:item.region_name.mn}}</Option>
            </Select>
            <Select v-model="formValidate.account_location_city_id" style="width:30%" @on-change="city($event,'birth')" transfer clearable>
                <Option v-for="item in birthCity" :value="item.id" :key="item.value">{{item.region_name.zh?item.region_name.zh:item.region_name.mn}}</Option>
            </Select>
            <Select v-model="formValidate.account_location_county_id" style="width:30%" transfer clearable>
                <Option v-for="item in birthCounty" :value="item.id" :key="item.value">{{item.region_name.zh?item.region_name.zh:item.region_name.mn}}</Option>
            </Select>
        </FormItem>

        <FormItem style="width:90%;">                         
            <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
        </FormItem>  
        <div style="clear:both"></div>
        <Spin size="large" fix v-if="spinShow"></Spin>                     
    </Form> 
</template>
<script>
export default {
    props: {
        infoOld: {
            type: [Boolean,Number,Object,Array],
            default: false
        },
        typeother: {
            type: [Boolean,String],
            default: false
        }
    },
    data() {
        const validatePyName = (rule, value, callback) => {
            let str = /[a-z,A-Z]/g;
            setTimeout(() => {
                if (!value) {
                    return callback(new Error('请填写姓名拼音'));
                }else if (!str.test(value)) {
                    return callback(new Error('姓名拼音为字母'));
                }else{
                    callback();
                }
            }, 1000);
        }
        const validateTime = (rule, value, callback) => {
            setTimeout(() => {
                if (!value) {
                    return callback(new Error('请选择身份证有效时间'));
                }else{
                    callback();
                }
            }, 1000);
        }
        return {
            infoUrl:`api/student/v1/studentauxiliary/lists/${this.infoOld.auxiliary?this.infoOld.auxiliary.student_auxiliary_id : ''}`,//请求单条数据
            saveUrl:'',//保存接口
            saveType:null,//保存方式
            
            // 数据字典获取数据  血型
            listDictionary:{
                blood:[]
            },
            spinShow:false,

            time:null, // 个人辅助信息身份证时间          
            
            infoOldObj:null,// 个人辅助数据
            
            regionList:[],//籍贯省
            birthCity:[],//出生地市
            birthCounty:[],//出生地区

            // 个人辅助信息
            formValidate: {
                py_name: '',//姓名拼音
                effective_date:null,//身份证件有效期
                used_name:{//曾用名
                    zh:'',
                    mn:'',
                    en:'',                    
                },
                specialty:{//特长
                    zh:'',
                    mn:'',
                    en:'',                    
                },
                blood_id:null,//血型
                account_type_id:null,//户口性质
                account_location_id:null,//户口所在地省
                account_location_city_id:null,//户口所在地市
                account_location_county_id:null,//户口所在地县
                user_id:this.infoOld.user_id,            
            },
            ruleValidate: {
                // time: [
                //     {  type:'array', required: true, message: '请选择证件有效期', trigger: 'change' }
                // ],
                account_type_id: [
                    { type:'number',required: true, message: '请选择户口性质', trigger: 'change' }
                ],
                effective_date: [
                    // { required: true, message: '请填写姓名拼音', trigger: 'blur' }
                    { validator: validateTime, trigger: 'change' }
                ],
                
                py_name: [
                    // { required: true, message: '请填写姓名拼音', trigger: 'blur' }
                    { validator: validatePyName, trigger: 'blur' }
                ],
                'used_name.zh': [
                    { required: true, message: '请填写曾用名', trigger: 'blur' }
                ],
                'specialty.zh': [
                    { required: true, message: '请填写特长', trigger: 'blur' }
                ],
            
            },
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 单条获取个人辅助信息
         * 
         ************************************************************/
        infoData(){
            this.spinShow=true
            this.$http.get(this.infoUrl).then(val=>{ 
                this.infoOldObj = JSON.parse(JSON.stringify(val.data))

                this.formValidate.blood_id = this.infoOldObj.blood_id==null ? '' :  parseInt(this.infoOldObj.blood_id)//用于默认选的 血型
                this.formValidate.account_type_id = parseInt(this.infoOldObj.account_type_id)//用于默认选的  户口性质
                this.formValidate.account_location_id =this.infoOldObj.account_location_id==null ? '' :  parseInt(this.infoOldObj.account_location_id)//用于默认选的 户口所在地省
                this.formValidate.account_location_city_id =this.infoOldObj.account_location_city_id==null ? '' : parseInt(this.infoOldObj.account_location_city_id)//用于默认选的 户口所在地市
                this.formValidate.account_location_county_id =this.infoOldObj.account_location_county_id==null ? '' : parseInt(this.infoOldObj.account_location_county_id)//用于默认选的 户口所在地县
                this.native(this.formValidate.account_location_id)
                this.city(this.formValidate.account_location_city_id)
                this.formValidate.py_name = this.infoOldObj.py_name// 姓名拼音
                this.formValidate.effective_date = this.infoOldObj.effective_date.split(" - ")// 身份证件有效期
                this.formValidate.used_name = this.infoOldObj.used_name// 曾用名
                this.formValidate.specialty = this.infoOldObj.specialty// 特长
                this.getbirthday(this.infoOldObj.effective_date.split(" - "))//用于入学年份提交
                this.spinShow=false
            }).catch(err=>{
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false
            })
        },
        
        /************************************************************
         * 
         * 个人辅助信息提交
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {   
                    this.spinShow=true    
                    this.saveType(this.saveUrl,this.formValidate)
                    .then(val=>{
                        this.$Message.success(val.message);
                        this.$emit('expandback',true)
                        this.spinShow=false
                    }) 
                    .catch(err=>{
                        console.log(err);
                        if(err.code && err.code==422) {
                            this.$Message.error(err.message);
                        }
                        this.spinShow=false
                    })
                } else {
                    this.$Message.error("表单验证失败!");
                }    
            })
        },
        
        /************************************************************
         * 
         * 提交处理日期格式
         * 
         ************************************************************/
        getbirthday(birthday){
            this.formValidate.effective_date = birthday;
        },

        /************************************************************
         * 
         * 数据字典获取数据
         * 
         ************************************************************/
        listDictionaryFun(){
            this.spinShow=true
            this.$http.get('api/dictionary/v1/dictionary/pidquerys?blood')
            .then((response) => {
                this.listDictionary=response.data
                this.spinShow=false
            })
            .catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false
            })
        },

        /************************************************************
         * 
         * 地区
         * 
         ************************************************************/
        regionListFun(){
            this.spinShow=true
            this.$http.get('api/base/v1/get/region/list')
            .then(val=>{
                this.regionList=val.data
                this.spinShow=false
            })
            .catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false
            })
        },

        /************************************************************
         * 
         * 点击省带市
         * 
         ************************************************************/
        native(val){
            if(val!=''){
                this.spinShow=false
                this.$http.get('api/base/v1/get/region/list?pid='+val)
                .then(item=>{
                    this.birthCity=[]
                    this.birthCity=item.data
                    this.spinShow=false
                })
                .catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                    this.spinShow=false
                })

            }
        },
        
        /************************************************************
         * 
         * 点击市带区
         * 
         ************************************************************/
        city(val){
            if(val!=''){
                this.spinShow=true
                this.$http.get('api/base/v1/get/region/list?pid='+val)
                .then(item=>{
                    this.birthCounty=[]
                    this.birthCounty=item.data
                    this.spinShow=false
                })
                .catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                    this.spinShow=false
                })
            }
        },

    },
    created() {
        this.regionListFun()
        this.listDictionaryFun()
        
        if(this.infoOld.auxiliary){
            // 如果有值 就是修改
            this.infoData()
            this.saveUrl=`api/student/v1/studentauxiliary/update/${this.infoOld.auxiliary.student_auxiliary_id}`
            this.saveType=this.$http.put
        }else{
            // 如果没有有值 就是添加  
            this.saveUrl='api/student/v1/studentauxiliary/create'
            this.saveType=this.$http.post
        }
        
    },    
    watch:{
        infoOld: {
            handler (val) {
                if(this.infoOld.auxiliary){
                    // 如果有值 就是修改
                    // this.infoUrl=`api/student/v1/studentauxiliary/lists/${this.infoOld.auxiliary?this.infoOld.auxiliary.student_auxiliary_id : ''}`,//请求单条数据
                    // this.infoData()
                    this.saveUrl=`api/student/v1/studentauxiliary/update/${this.infoOld.auxiliary.student_auxiliary_id}`
                    this.saveType=this.$http.put
                }else{
                    // 如果没有有值 就是添加  
                    this.saveUrl='api/student/v1/studentauxiliary/create'
                    this.saveType=this.$http.post
                }
            }
        },
    },

}

</script>